<template>
  <button @click="handleAdd">Add</button>（该顺序即答案顺序）
  <div class="flex justify-between">
    <VueDraggable
      v-model="list"
      :animation="150"
      handle=".handle"
      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
    >
      <div
        v-for="(item, index) in list"
        :key="item.id"
        class="item h-50px bg-gray-500/5 px-2 rounded flex items-center justify-between"
      >
        <span class="iconfont icon-tuozhuai handle cursor-move"></span>
        <el-input style="width: 240px" v-model="item.name" placeholder="Please input" clearable />
        <span
          class="iconfont icon-shanchu cursor-pointer"
          @click="remove(index)"
          v-if="list.length > 2"
        ></span>
      </div>
    </VueDraggable>
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const list = ref([
  {
    name: '',
    id: '1',
  },
  {
    name: '',
    id: '2',
  },
  {
    name: '',
    id: '3',
  },
  {
    name: '',
    id: '4',
  },
])

function handleAdd() {
  const length = list.value.length + 1
  list.value.push({
    name: ``,
    id: `${length}`,
  })
}
function remove(index: number) {
  list.value.splice(index, 1)
}

defineExpose({
  list,
})
</script>

<style lang="less" scoped>
button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  background: linear-gradient(145deg, skyblue, rgb(42, 141, 180));
  color: aliceblue;
  margin-top: 8px;
  font-size: large;
  font-weight: bold;
  &:hover {
    cursor: pointer;
  }
  &:active {
    transform: scale(0.9);
    box-shadow: none;
  }
}
.item {
  margin-top: 6px;
}
.el-input {
  margin-left: 4px;
  margin-right: 4px;
}
.icon-shanchu:hover {
  color: red;
}
</style>
